<!DOCTYPE html>
<html>
<head>
    <title>取货助手 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/regexp.js" type="text/javascript"></script>
    <script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="layer/layer.js"></script>
    <style type="text/css">
        .expPickCont {
            padding-bottom: 20px;
        }

        .expPickCont .expPickIcon {
            width: 15%;
            margin: 0 auto;
            text-align: center;
        }

        .expPickCont .expPicTitle {
            text-align: center;
            font-weight: bold;
        }

        .searchInfoBtn {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            background: #1f72ff;
            color: #fff;
            font-weight: bolder;
        }

        .expUserInfoCont {
            width: 90%;
            margin: 20px auto 20px;
            font-size: 14px;
        }

        .expUserInfoNull {
            width: 100%;
            line-height: 150px;
            text-align: center;
            color: #888888;
            display: none;
        }

        .expInfoCont {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
        }

        .expInfoCont td:nth-of-type(1) {
            text-align: right;
            height: 2em;
            line-height: 2em;
        }

        .expInfoCont > .btns {
            border-top: 1px dashed #666;
            padding-top: 20px;
            text-align: right;
            margin-top: 10px;
        }

        .btn-success {
            padding: 5px 15px;
            color: #fff;
            background: #2F9925;
            border: 1px solid #fff;
            border-radius: 5px;
        }

        .status2 {
            position: relative;
        }

        .status2_bg {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
        }

        .status2_bg > img {
            width: 30%;
            margin: 0 auto;
            margin-top: 50px;
            opacity: 0.5;

        }


        .status1 {
            display: auto;
        }

        .status2 {
            display: none;
        }
    </style>

</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="../index.html">快递首页</a>
            <a href="../userhome.html">个人中心</a>
            <a href="../delivery.html">送货上门</a>
            <a href="../lazyboard.html">懒人排行</a>
            <a href="../expassistant.html">快递助手</a>
        </div>
    </div>

    <div class="expPickCont">
        <div class="expPickIcon">
            <img src="images/pickexpicon.png" width="100%">
        </div>
        <p class="expPicTitle">确认取货</p>

        <div class="expPickInput">
            <form>
                <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
                <input id="wxCode" type="hidden" value="${wxCode}"/>
                <div class="userInputCont">
                    <div class="inputTypeCont">
                        <div class="inputTitle">取货码</div>
                        <input type="text" id="expPickUserId" class="commonInputFunc" name="username"
                               placeholder="请输入取货码">
                        <div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
                    </div>
                </div>
            </form>
            <div class="searchInfoBtn" id="searchInfoBtn">查找信息</div>
        </div>
    </div>

    <div class="expUserInfoCont" id="expUserInfoCont">
        <div class="expUserInfoNull">
            暂无查到相关信息
        </div>
    </div>
</div>

<script type="text/javascript">
    $.ajax({
        url: "wxconf.do",
        type: "GET",
        data: "xurl=" + location.href.split('#')[0],
        success: function (data) {
            //data = JSON.parse(data);
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appid, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['startRecord', 'stopRecord', 'scanQRCode', 'playVoice', 'uploadVoice', 'downloadVoice', 'onVoiceRecordEnd', 'translateVoice'
                    , 'downloadVoice', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
            });
        }, error: function () {

        }
    });

    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        $("#scanQRCodeBtn").click(x1);
    });
    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("扫描错误")
    });

    // 电话号码
    let userPhone;

    function x1() {
        wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                // 取件码
                let code;
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                if (result.indexOf("express_") == 0) {
                    // 快递入口
                    code = result.substring(8);
                    $("#expPickUserId").val(code)
                } else if (result.indexOf("userPhone_") == 0) {
                    // 用户入口
                    userPhone = result.substring(10);
                    getExpressList();
                }
            }
        });
    }


    // 渲染快递信息
    function getExpressList() {
        let load = layer.load();
        $.getJSON("/wx/userExpress.do", {userPhone: userPhone}, function (data) {
            layer.close(load);
            // 快递列表显示
            if (data.status == -1) {
                layer.msg(data.result, function () {
                });
                $(".expUserInfoNull").fadeIn(500);
            } else {

                $("#expUserInfoCont").html("");
                // 显示快递
                let list = data.data;
                for (let i = 0; i < list.length; i++) {
                    var item = "<div class=\"expInfoCont status1\">\n" +
                        "\t\t\t<table>\n" +
                        "\t\t\t\t<tr>\n" +
                        "\t\t\t\t\t<td>快递公司：</td><td>" + list[i].company + "</td>\n" +
                        "\t\t\t\t</tr>\n" +
                        "\t\t\t\t<tr>\n" +
                        "\t\t\t\t\t<td>快递单号：</td><td>" + list[i].number + "</td>\n" +
                        "\t\t\t\t</tr>\n" +
                        "\t\t\t\t<tr>\n" +
                        "\t\t\t\t\t<td>到件时间：</td><td>" + list[i].inTime + "</td>\n" +
                        "\t\t\t\t</tr>\n" +
                        "\t\t\t\t<tr>\n" +
                        "\t\t\t\t\t<td>取件码：</td><td>" + list[i].code + "</td>\n" +
                        "\t\t\t\t</tr>\n" +
                        "\t\t\t</table>\n" +
                        "\t\t\t<div class=\"btns\">\n" +
                        "\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus(" + list[i].code + ",0)\"'>确认收货</button>\n" +
                        "\t\t\t</div>\n" +
                        "\t\t</div>";

                    $("#expUserInfoCont").append($(item));
                }
            }
        })
    }

    // 根据取件码进行确认收货
    function updateStatus(code, type) {
        let load = layer.load();
        $.getJSON("/wx/updateStatus.do", {code: code}, function (data) {
            layer.close(load);
            if (data.status == 0){
                // 刷新快递信息
                $("#expUserInfoCont").html("");
                if (type == 0) {
                    getExpressList();
                }
                layer.msg(data.result)
            } else{
                layer.msg(data.result)
            }
        })

    }

    $("#searchInfoBtn").click(function () {
        let code = $("#expPickUserId").val();
        $("#expUserInfoCont").html("");
        let load = layer.load();
        $.getJSON("/wx/findByCode.do", {code: code}, function (data) {
            layer.close(load);
            if (data.status == 0) {
                $("#expUserInfoCont").html("");
                // 显示快递
                let list = data.data;
                var item = "<div class=\"expInfoCont status1\">\n" +
                    "\t\t\t<table>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>快递公司：</td><td>" + list.company + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>快递单号：</td><td>" + list.number + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>到件时间：</td><td>" + list.inTime + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>取件码：</td><td>" + list.code + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t</table>\n" +
                    "\t\t\t<div class=\"btns\">\n" +
                    "\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus(" + list.code + ",1)\"'>确认收货</button>\n" +
                    "\t\t\t</div>\n" +
                    "\t\t</div>";
                $("#expUserInfoCont").append($(item));
            } else{
                layer.msg(data.result)
            }
        })
    })


</script>
</body>
</html>